import React, { Component } from 'react';
import Square from './Square';
import { DropTarget } from 'react-dnd';


const squareTarget = {
  // drop(props:any) {
  //   console.log(2, props)
  //   // moveKnight(props.x, props.y);
  // },
  // canDrop(props:any) {
  //   console.log(new Date().getTime(), props.x, props.y, canMoveKnight(props.x, props.y))
  //   return canMoveKnight(props.x, props.y);
  //   // return true
  // },

};

function collect(connect:any, monitor:any) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    // isOverCurrent: monitor.isOver({ shallow: true }),
    // canDrop: monitor.canDrop()
  };
}

@DropTarget("K", squareTarget, collect)
export default class BoardSquare extends Component<any ,any> {
  public renderOverlay(color:any) {
    return (
      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        height: '100%',
        width: '100%',
        zIndex: 1,
        opacity: 0.5,
        backgroundColor: color,
      }} />
    );
  }

  public render() {
    console.log(33, this.props)
    const { x, y, connectDropTarget, isOver } = this.props;
    const black = (x + y) % 2 === 1;

    return connectDropTarget(
      <div style={{
        position: 'relative',
        width: '100%',
        height: '100%'
      }}>
        <Square black={black}>
          {this.props.children}
        </Square>
        {isOver && this.renderOverlay('red')}
      </div>
    );
  }
}